<template>
	<view id="index-life">
		<view class="content-life">
			<view class="header">
				<view :class="['tab',tabType == (i+1)?'tab-act':'']" @click="setTab(obj,i)" v-for="(obj,i) in tabArr" :key="obj.catId">
					<view class="name">{{obj.catName}}</view>
					<view class="after"></view>
				</view>
			</view>
			
			<view class="insure-ul" v-if="lifeArr.length > 0">
				<view class="insure-li" v-for="(obj,i) in lifeArr" :key="obj.articleId"  @click="toDetail(obj.articleId)">
					<view class="left">
						<image :src="obj.img" class="li-img" mode=""></image>
					</view>
					<view class="li-row">
						<view class="h3">{{obj.articleTitle}}</view>
						<view class="h6">{{obj.articleKey}}</view>
					</view>
				</view>
			</view>
			<view class="no-ul" v-else>
				--暂无更多数据--
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabArr: [],
			tabType: 1,
			page: 1,
			totalPage: 1,
			lifeArr: [],
			catId: '',
		};
	},
	onLoad() {
		this.getCate();
	},
	components: {

	},
	onShow() {

	},
	methods: {
		// 获取分类
		getCate(){
			this.$Request.request('/api/article/cate','get').then(res=>{
				if(res.status == 1){
					this.tabArr = res.data.data;
					this.catId = this.tabArr[0].catId;
					this.getList(this.catId)
				}
			})
		},
		// 切换tab
		setTab(obj,index){
			this.tabType = (index + 1);
			this.page = 1;
			this.totalPage = 1;
			this.catId = obj.catId;
			this.getList(obj.catId)
		},
		toDetail(cid){
			uni.navigateTo({
				url: `/pages/index/lifeData?cid=${cid}`
			})
		},
		getList(catId){
			this.$Request.request('/api/article/index','get',{
				page: this.page,
				limit: 10,
				catId: catId,
			}).then(res=>{
				if(res.status == 1){
					let result = res.data;
					this.totalPage = result.last_page;
					this.lifeArr = this.page == 1? result.data: this.lifeArr.push(...result.data);
				}
			})
		},
	},
	onReachBottom() {
		if (this.page >= this.totalPage) return
		this.page++
		this.getList(this.catId)
	},
};
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>

<style scoped lang="scss">
	.header {
		width: 100%;
		background: #fff;
		padding: 0px 60rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.tab {
			width: 45%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 26rpx;
			height: 96rpx;
			.name {
				font-size: 32rpx;
				color: #7A7C80;
			}
			.after {
				margin-top: 24rpx;
				width: 228rpx;
				height: 4rpx;
				background: #EE486C;
				opacity: 0;
			}
		}
		.tab-act {
			.name {
				color: #EE486C;
			}
			.after {
				opacity: 1;
			}
		}
	}
	
	.insure-ul {
		padding-top: 20rpx;
		.insure-li {
			width: 100%;
			background: #fff;
			padding: 28rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			margin-bottom: 4rpx;
			.left {
				width: 180rpx;
				.li-img {
					width: 180rpx;
					height: 130rpx;
					display: block;
					border-radius: 10rpx;
				}				
			}
			.li-row {
				width: calc(100% - 208rpx);
				margin-left: 28rpx;
				.h3 {
					max-width: 100%;
					font-size: 32rpx;
					font-weight: 600;
					color: #1D1E22;
					line-height: 44rpx;
					margin-bottom: 16rpx;
					@include nowrap;
				}
				.h6 {
					max-width: 100%;
					font-size: 28rpx;
					color: #7A7C80;
					line-height: 40rpx;
					@include nowraps(2);
				}
			}
		}
	}
	
</style>
